import React from 'react';
import './Header.css';

interface HeaderProps {
    isAuthenticated: boolean;
    onConnectClick: () => void;
}

const Header: React.FC<HeaderProps> = ({ isAuthenticated, onConnectClick }) => {
    return (
        <>
            <div className="header">
                <h1>YouTube订阅管理器</h1>
                <div className="status" style={{ display: isAuthenticated ? 'flex' : 'none' }}>
                    <div className="status-dot"></div>
                    <span>已连接 YouTube 账户 | 100个订阅频道 | 最后更新: 2分钟前</span>
                </div>
            </div>

            {/* 未授权状态提示 */}
            <div className="header-auth" style={{ display: isAuthenticated ? 'none' : 'flex' }}>
                <div className="auth-warning">
                    <span className="auth-warning-icon">⚠️</span>
                    <span>请先连接你的YouTube账户以开始使用</span>
                </div>
                <button className="btn btn-primary" onClick={onConnectClick}>立即连接</button>
            </div>
        </>
    );
};

export default Header;
